<template>
    <div class="">
        <el-tabs type="border-card">
            <el-tab-pane lazy v-for="item in plugins.column" :key="item.label" :label="item.label">
                <avue-card 
                :option="cardoption"                
                :data="item.option.column">
                    <template  slot="menu" slot-scope="scope">
                        <span type="primary" @click="handelAddPlugin(scope.row.name.toLowerCase(),scope.row)">新增插件</span>
                    </template>
                </avue-card>                
            </el-tab-pane>
        </el-tabs>
        <el-dialog :visible.sync="open"  append-to-body  v-if="open" >
            <plugin-schema :pluginName='pluginName' :plugin='pluginObject' @callback="handleAddPluginCallback" />
        </el-dialog>
    </div>
</template>
<script>
import {mapGetters } from 'vuex'
import {getColumns} from '@/utils/kongUtil'
import PluginSchema from '../components/pluginSchema'
export default {
    components:{
        PluginSchema
    },
    props:{
        service:{
            type: Object,
            required: false,
            default:null,
        },
        route:{
            type: Object,
            required: false,
            default: null,
        },
        consumer:{
            type: Object,
            required: false,
            default: null,
        }
    },
    data () {
        return {
            plugins:[],
            cardoption: {
                addBtn: false,
                span: 6,
                props: {
                img: "img",
                title: "name",
                info: "description",
                },
            },
            open: false,
            pluginName: "",
            pluginObject: {
                name: "",
                config:{},
            },

        }
    },
    created(){
        console.log(this.kongInfo);
        this.getPluginsGroupInfo();
    },
    computed: {
        ...mapGetters({
        kongInfo: 'kongInfo',
        })},
    methods: {
        getPluginsGroupInfo(){
            this.plugins=getColumns(this.kongInfo.version,'Plugins');
            // 循环 plugins 添加自定义插件
            if(this.kongInfo){
                let kongPlugins=this.kongInfo.plugins.available_on_server;
                let consumerColumn={
                    label: "自定义",
                    description: "Custom Plugins",
                    icon: "mdi-account-box-outline",
                    hasConsumerPlugins: true,
                    option: {
                        column: [],
                    },                
                }
                if(kongPlugins){
                    let conPlugins=[];
                    this.plugins.column.forEach(p=>{             
                        p.option.column.forEach(_p =>{
                            conPlugins.push(_p.name.toLowerCase());
                        })
                    });                
                    Object.keys(kongPlugins).forEach((kp)=>{
                        if(conPlugins.indexOf(kp)<0){
                            // console.log(kp)
                            consumerColumn.option.column.push({                            
                                name: kp,
                                description: kp,
                                img: "/images/plugins/kong.svg",
                                hasConsumerPlugins: true,
                            })
                        }
                    })
                    this.plugins.column.push(consumerColumn)
                }
            }         
            let pluginConsumer=[];
            if(this.consumer){
                // console.log(JSON.stringify(this.plugins))
                this.plugins.column.forEach((col,colIndex) => {   
                    if(col.hasConsumerPlugins){
                        let colTemp=col;
                        let temp=col.option.column.filter(op =>op.hasConsumerPlugins==true);
                        colTemp.option.column=temp;
                        // console.log(JSON.stringify(colTemp))   
                        if(colTemp.option.column.length>0){
                            pluginConsumer.push(colTemp);  
                        }                                              
                    }
                    
                });                    
                // console.log("pluginConsumer:"+JSON.stringify(pluginConsumer))
                this.plugins.column=pluginConsumer;
            }
        },
        handelAddPlugin(name,plugin){
            this.pluginName=name;
            this.pluginObject.name=name;
            if(this.service){
                this.pluginObject["service"] = { id: this.service.id };
            }
            if(this.route){
                this.pluginObject["route"] = { id: this.route.id };
            }
            if(this.consumer){
                this.pluginObject["consumer"] = { id: this.consumer.id };
            }
            console.log("handelAddPlugin pluginObject:"+JSON.stringify(this.pluginObject))
            this.open=true;
            // this.msgSuccess(name);
        },
        handleAddPluginCallback(data){
            console.log("handleAddPluginCallback:"+JSON.stringify(data));
            this.open=false;
            this.$emit('callback',"成功");
        }

    }
    
}
</script>
<style scoped>

</style>